<template>
  <div id="app">
    <div class="nav-menu">
      <router-link to="/" class="router-a">
        <div>YYUI</div>
        <div style="font-size: 12px;margin-top: 5px;">作者：y_coder</div>
      </router-link>
      <router-link v-for="(router,index) in routers" class="router-a"
                   :class="{'active':activePath === router.path}" :key="index" :to="router.path">
        {{ router.label }}
      </router-link>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      routers: [
        { path: '/button', label: 'button' },
        { path: '/message', label: 'message' },
      ],
      activePath: ''
    }
  },
  created () {
    this.activePath = this.$route.path; // 初始化 activePath
    // 使用 Vue Router 提供的导航守卫来监听路由变化，并在路由变化时更新 activePath。
    this.$router.beforeEach((to, from, next) => {
      this.activePath = to.path;
      next();
    });
  },
  methods: {
  }
}
</script>

<style lang="less">
#app {
	font-family: "Avenir", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	height: 100%;
}
.nav-menu {
	background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
	width: 150px;
	overflow-y: auto;
	.router-a {
		color: white;
		text-decoration: none;
		padding: 20px 0px;
		display: inline-block;
		text-align: center;
		width: 100%;
		&.active {
			background-image: linear-gradient(to left, #a1c4fd 0%, #c2e9fb 100%);
		}
	}
}
.content {
	flex: 1;
	overflow-y: auto;
	will-change: transform;
}
// 引入iconfont图标
[class^="iconfont"],
[class*="iconfont"] {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
</style>
